import React from 'react';
import { Form, Input, InputNumber, Select, Button, Modal } from 'antd';
import { ruleP, nameMinLength, nameMaxLength, remarkMaxLength } from '@/utils/rule';
import { connect } from 'dva';

@Form.create({ name: 'BasicInformation' })
@connect(
  state => ({
    loadingtestConnection: state.loading.effects['database/testConnection'],
    loadingqueryListByTypeCode: state.loading.effects['database/queryListByTypeCode'],
    datatestConnection: state.database.datatestConnection,
  }),
  dispatch => ({
    testConnection: e => dispatch({ type: 'database/testConnection', payload: e }),
    queryListByTypeCode: e => dispatch({ type: 'database/queryListByTypeCode', payload: e }),
  })
)
export default class BasicInformation extends React.Component {
  static defaultProps = { text: {} };
  state = {
    datadbType: [],
  };
  componentDidMount() {
    this.props.getInstance(this);
    this.props.queryListByTypeCode({ dataDictTypeCode: 'dbType' }).then(res => {
      if (res.rescode == 200) {
        this.setState({ datadbType: res.data ? res.data.dataList || [] : [] });
      } else {
        Modal.error({ title: '获取数据库类型失败' });
      }
    });
  }
  render() {
    return (
      <Form labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
        <Form.Item label="数据库类型">
          {this.props.form.getFieldDecorator('dbType', {
            rules: [{ required: true, message: '数据库类型不能为空' }],
            initialValue: this.props.text.dbType,
          })(
            <Select placeholder="请选择" allowClear loading={this.props.loadingqueryListByTypeCode}>
              {this.state.datadbType.map(item => (
                <Option value={item.value} key={item.value}>
                  {item.name}
                </Option>
              ))}
            </Select>
          )}
        </Form.Item>
        <Form.Item label="数据库名">
          {this.props.form.getFieldDecorator('dbName', {
            rules: [
              { required: true, whitespace: true, message: '数据库名不能为空' },
              { min: nameMinLength()[0], message: nameMinLength()[1] },
              { max: nameMaxLength()[0], message: nameMaxLength()[1] },
            ],
            initialValue: this.props.text.dbName,
          })(<Input placeholder="请输入" allowClear />)}
        </Form.Item>
        <Form.Item label="待扫描数据库名">
          {this.props.form.getFieldDecorator('needScanDb', {
            rules: [
              { required: true, whitespace: true, message: '待扫描数据库名不能为空' },
              { min: nameMinLength()[0], message: nameMinLength()[1] },
              { max: nameMaxLength()[0], message: nameMaxLength()[1] },
            ],
            initialValue: this.props.text.needScanDb,
          })(<Input placeholder="请输入" allowClear />)}
        </Form.Item>
        <Form.Item label="IP地址">
          {this.props.form.getFieldDecorator('dbIp', {
            rules: [
              { required: true, message: 'IP地址不能为空' },
              { pattern: new RegExp(ruleP(3)[0], 'g'), message: ruleP(3)[1] },
            ],
            initialValue: this.props.text.dbIp,
          })(<Input placeholder="请输入" />)}
        </Form.Item>

        <Form.Item label="端口">
          {this.props.form.getFieldDecorator('dbPort', {
            rules: [
              { required: true, message: '端口号不能为空' },
              { pattern: new RegExp(ruleP(10)[0]), message: ruleP(10)[1] },
            ],
            initialValue: this.props.text.dbPort,
          })(<InputNumber style={{ width: '100%' }} placeholder="请输入" />)}
        </Form.Item>

        {this.props.form.getFieldValue('dbType') == 'mysql' ||
        this.props.form.getFieldValue('dbType') == 'teledb' ? null : (
          <Form.Item label="实例名">
            {this.props.form.getFieldDecorator('serviceName', {
              rules: [
                { required: true, whitespace: true, message: '实例名不能为空' },
                { max: remarkMaxLength()[0], message: remarkMaxLength()[1] },
              ],
              initialValue: this.props.text.serviceName,
            })(<Input placeholder="请输入" allowClear />)}
          </Form.Item>
        )}
        <Form.Item label="用户名">
          {this.props.form.getFieldDecorator('dbAccount', {
            rules: [
              { required: true, message: '用户名不能为空' },
              { max: nameMaxLength()[0], message: nameMaxLength()[1] },
              { pattern: new RegExp(ruleP(0)[0], 'g'), message: ruleP(0)[1] },
            ],
            initialValue: this.props.text.dbAccount,
          })(<Input placeholder="请输入" allowClear />)}
        </Form.Item>
        <Form.Item label="数据库密码">
          {this.props.form.getFieldDecorator('dbPassword', {
            rules: [
              {
                required: Object.keys(this.props.text).length ? false : true,
                message: '数据库密码不能为空',
              },
            ],
            initialValue: this.props.text.dbPassword,
          })(
            <Input.Password
              autoComplete="new-password"
              placeholder={Object.keys(this.props.text).length ? '无需修改可不填' : '请输入'}
            />
          )}
        </Form.Item>
        {/* <Button
          type="primary"
          loading={this.props.loadingtestConnection}
          onClick={() =>
            this.props.form.validateFields(async (err, values) => {
              if (err) return;
              this.props.testConnection(values).then(res => {
                if (res.rescode == 200) {
                  Modal.success({ title: '操作成功' });
                } else {
                  Modal.error({ title: '操作失败', content: res.msg });
                }
              });
            })
          }
        >
          测试连接
        </Button> */}
      </Form>
    );
  }
}
